<template>
  <div class="login">
    <div class="login_main">
      <div class="login_left"></div>
      <div class="login_right">
        <div class="login_form">
          <h3>登录</h3>
          <el-form
            :model="form"
            ref="loginFormRef"
            :rules="rules"
            label-width="70px"
            size="large"
            status-icon
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="form.username"
                placeholder="Please input username"
              />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="form.password"
                type="password"
                placeholder="Please input password"
                show-password
                @keyup.enter.native="login"
              />
            </el-form-item>
            <el-button type="info" size="large" @click="resetForm(loginFormRef)"
              >清空</el-button
            >
            <el-button type="primary" size="large" @click="login"
              >登录</el-button
            >
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../utils/http";
import { defineComponent, reactive, ref, unref } from "vue";
import {
  ElMessage,
} from "element-plus";
import { setToken } from "../utils/auth";
import { useRouter } from "vue-router";
export default defineComponent({
  components: {
    ElMessage,
  },
  setup() {
    const router = useRouter();
    const loginFormRef = ref(null);
    let status = reactive({
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "Please input Activity username",
            trigger: "blur",
          },
          {
            min: 1,
            max: 10,
            message: "Length should be 1 to 10",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "Please input Activity password",
            trigger: "blur",
          },
          {
            min: 6,
            max: 12,
            message: "Length should be 6 to 12",
            trigger: "blur",
          },
        ],
      },
    });
    function login() {
      console.log(loginFormRef);
      loginFormRef.value.validate((valid, fields) => {
        console.log(valid);
        if (valid) {
          console.log("submit!");
          // console.log(status.form);
          // 登录
          request.post("/api/login", unref(status.form)).then((res) => {
            console.log(res);
            if (res.status == 200) {
              setToken("token", res.data.token);
              ElMessage({
                type: "success",
                message: res.message,
              });
              router.push("/");
            } else {
              ElMessage({
                type: "error",
                message: res.message,
              });
            }
          });
        } else {
          console.log("error submit!", fields);
        }
      });
    }
    const resetForm = (ref) => {
      if (!ref) return;
      ref.resetFields();
    };
    return {
      ...status,
      login,
      loginFormRef,
      resetForm,
    };
  },
});
</script>

<style lang="less" scoped>
@main-color: #333;
.login {
  color: @main-color;
}
.login_main {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  // background-color: #cfe8e4;
}
.login_left {
  width: 50%;
  height: 100vh;
  background: url("../assets/无权限访问.png") center center no-repeat;
}
.login_right {
  width: 40%;
}
.login_form {
  position: relative;
  h3 {
    text-align: center;
    margin-bottom: 20px;
  }
  backdrop-filter: saturate(180%) blur(10px);
  background-color: rgba(240, 247, 246, 0.5);
  border-radius: 15px;
  padding: 20px;
  height: 250px;
  .el-button {
    margin-left: 110px;
  }
}
</style>